<template>
    <div class="food_list" v-if="index === 0">
        <van-tree-select height="88vw" :items="stateDate.items" :main-active-index.sync="stateDate.active"
            @click-nav="navClick">
            <template #content>
                <div v-for="(i, index) in stateDate.subItem" class="item_bg">
                    <FoodAdd :onChange="onChange" :showAdd="true" :item="i" :addClick="addClick" />
                </div>
            </template>
        </van-tree-select>
    </div>
    <div v-else>{{ foodData.content }}</div>
</template>

<script lang='ts' setup>
import { ref, defineProps, reactive, onMounted } from 'vue'
import FoodAdd from "../../../components/FoodAdd.vue";
const props = defineProps(['index', 'foodData'])
const stateDate = reactive({
    active: 0,
    items: [],
    subItem: [],
});
const init = () => {
    const newList = [];
    props.foodData.items?.map((i, index) => {
        newList.push({ text: i.text })
        if (stateDate.active === index) {
            stateDate.subItem = i.children;
        }
    })
    stateDate.items = newList;
}
init()
const navClick = (i) => {
    stateDate.active = i;
    init();
}
const addClick = (i) => {
    // 按钮改变步进器的值
    stateDate.subItem.forEach(item => {
        if (item.id === i) {
            item.add = false;
            item.num += 1;
        }

    })
}
const onChange = (index, detail) => {
    console.log(index, detail, 50);

    stateDate.subItem.forEach(item => {

        if (item.id === detail.name) {
            item.num = index;

        }

    })


}

</script>
<style lang="scss" scoped>
.food_list {
    margin-top: 20px;

    .item_bg {
        padding: 10px;
    }
}

::v-deep .van-tree-select__item--active {
    color: #ffc400;
}

::v-deep .van-sidebar-item--select::before {
    background-color: #ffc400;
}
</style>